<template>
	<view class="flex flex-col justify-center items-center">
		<view class="title mt20 mb20 flex justify-center fw800 text-2rem font-Menlo ">
			{{$t('login.title')}}
		</view>
		<view class="content">
			<uni-forms ref="form" :modelValue="loginData" :rules="rules" label-position="left" > 
				<up-line></up-line>
				<uni-forms-item :label="$t('login.account')" name="account" :border="true">
					<uni-easyinput  :placeholder="$t('login.accountText')" :inputBorder="false" v-model="loginData.account"/>
				</uni-forms-item>
				<up-line></up-line>
				<uni-forms-item :label="$t('login.password')" name="password" :border="true">
					<uni-easyinput  :placeholder="$t('login.passwordText')" type="password" :inputBorder="false" v-model="loginData.password"/>
				</uni-forms-item>
				<up-line></up-line>
			</uni-forms>	
		</view>
		<view class="btn_box">
			<up-button type="primary" :text="$t('login.login')" @click="submit" :loading="loading"></up-button>
		</view>
		<view class="set_font absolute bottom-3vh  w-44vw">
			<view>
				<up-text :text="$t('login.setLanguage')" size="12px" @click="toLanguage"></up-text>
			</view>
			<up-line direction="col" length="2vh"></up-line>
			<view>
				<up-text :text="$t('login.setMore')" size="12px"></up-text>
			</view>
		</view>
	</view>
</template>

<script setup>
import SetI18nVue from '../../components/SetI18n.vue';
import {navigateToSelf,switchTabSelf} from '../../utils/common.js';
import { useI18n } from 'vue-i18n';
import {useRequest} from '../../api';
import { saveUserToken } from '../../utils/user';
import { useUserInfo } from '../../store';


const {USER_LOGIN} = useRequest()
const userInfo = useUserInfo()
const {t}  = useI18n()

// 按钮加载
const loading = ref(false)

// 更多设置跳转
function toLanguage(){
	navigateToSelf(
		"/pages/language/language"
	)
}

// 
const form = ref(null)
// 登录参数
const loginData = ref({
	account:'',
	password:''
})
// 表单校验规则
const rules = ref({
	account:{
		rules:[
			{
				required:true,
				errorMessage: t('login.accountText')
			}
		]
	},
	password:{
		rules:[{
			required:true,
			errorMessage:t('login.passwordText')
		}]
	}
})

// 提交登录表单
function submit(){
	form.value.validate().then((res)=>{
		USER_LOGIN(res).then((res)=>{
			loading.value = true
			setTimeout(()=>{
				// 存储token到本地
				saveUserToken(res.token)
				// 存储用户信息到状态管理
				const {username,avator,account} = res.userInfo
				userInfo.setUserInfo(username,avator,account)
				switchTabSelf('/pages/index/index')
			},2000)
		}).default(()=>{
			loading.value = false
		})
	}).catch(()=>{
		// 错误处理
	})
}
</script>

<style lang="scss" scoped>
.title{
	color: #2c2c2c;
}
.content{
	color: #2c2c2c;
	width: 80vw;
}
.uni-forms-item{
	margin: 10px 0;
}
.btn_box{
	width: 39vw;
	color: #2c2c2c;
	position: absolute;
	bottom: 10vh;
}
.set_font{
	display: flex;
	justify-content: space-around;
	align-items: center;
}
@media (prefers-color-scheme: dark) {
	.title{
		color: #f8f8f8;
	}
	.content{
		color: #f8f8f8;
	}
}
</style>
